<template>
    <div
        v-loading="loading"
        element-loading-text="正在加载数据，请稍等！"
        style="width: 100%; height: 100%;"
    >
        <el-table
            :data="tableData"
            :stripe="stripe"
            :border="border"
            :height="height"
            :header-cell-style="{'background-color': '#FAFAFA', 'color': '#333'}"
            highlight-current-row
            :show-header="showHeader"
            @selection-change="selectionChange"
        >
        <el-table-column
            v-if="isSelect"
            type="selection"
            width="40"
        />
        <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :label="item.label"
            :prop="item.prop"
            :show-overflow-tooltip="showOverflowTooltip"
            :align="align"
            :min-width="item.minWidth ? item.minWidth : '110'"
            :formatter="item.formatter"
        >
            <template #default="{ row }">
                <el-input-number
                    v-if="inputNumber && item.editType === 'inputNumber' && row.editType === 'inputNumber'"
                    v-model.trim="row[item.prop]"
                    :controls="false"
                    style="width: 100%;"
                />
            </template>
        </el-table-column>
        <el-table-column
            v-if="operationBtn.length > 0"
            label="操作"
            min-width="90"
        >
            <template #default="scope">
                <el-button
                    v-for="item in operationBtn"
                    :key="item.name"
                    @click.prevent="item.click(scope.row)"
                    type="primary"
                    link
                    style="padding: 0; font-weight: bold;"
                >
                <template v-if="item.dynamicName">
                    <span :style="{ color: item.dynamicName(scope.row).color ? item.dynamicName(scope.row).color : '' }">
                        {{ item.dynamicName(scope.row).name }}
                    </span>
                </template>
                <template v-else>
                    <span :style="{ color: item.color ? item.color : '' }">
                        {{ item.name }}
                    </span>
                </template>
                </el-button>
            </template>
        </el-table-column>
        </el-table>

        <div v-if="pagination" style="margin-top: 10px; display: flex; justify-content: center; align-items: center;">
            <el-pagination
                background
                layout="total, prev, pager, next"
                :total="total"
                :current-page="currentPage"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-count="pageCount"
            />
        </div>
    </div>
</template>

<script setup>
const props = defineProps({ 
	loading: {
		type: Boolean,
		default: false
	},
    tableData: {
		type: Array,
		default: []
	},
    stripe: {
		type: Boolean,
		default: true
	},
    border: {
		type: Boolean,
		default: true
	},
    height: {
		type: String,
		default: '400px'
	},
    columns: {
        type: Array,
        default: []
    },
    showOverflowTooltip: {
		type: Boolean,
		default: true
	},
    align: {
		type: String,
		default: 'left'
	},
    total: {
        type: Number,
        default: 0
    },
    currentPage: {
        type: Number,
        default: 1
    },
    pageCount: {
        type: Number,
        default: 1
    },
    operationMinWidth: {
        type: String,
		default: '90'
    },
    operationBtn: {
        type: Array,
        default: []
    },
    isSelect: {
        type: Boolean,
		default: true
    },
    pagination: {
        type: Boolean,
		default: true
    },
    showHeader: {
        type: Boolean,
		default: true
    },
    inputNumber: {
        type: Boolean,
		default: true
    }
})

const emits = defineEmits(['handleSizeChange', 'handleCurrentChange', 'selectionChange'])

function handleSizeChange(val) {
    emits('handleSizeChange', val)
}

function handleCurrentChange(val) {
    emits('handleCurrentChange', val)
}

function selectionChange(val) {
    emits('selectionChange', val)
}
</script>
